<template>
  <div>
    <van-popup v-model="show" position="bottom" :close-on-click-overlay="false" :style="{ height: 'auto' }">
      <div class="first_header">{{title}}</div>
      <ul class="first_content" >
        <li v-for="(item, index) in applyType" :key="index" @click="typeClick(index)">
          <img :src="item.img" alt="">
          <div>{{item.name}}</div>
        </li>
      </ul>
      <div class="first_close" @click="closeClick">关闭</div>
    </van-popup>
    <van-popup
      style="background: #ffffff"
      v-model="mycardShow"
      :close-on-click-overlay="false"
      position="bottom"
      :style="{ height: 'auto' }"
    >
      <div class="nav_bar">
        <div class="nav_icon" @click="backClick">
          <img src="../../../assets/img/navbar/ic_back_left.png" alt="" />
        </div>
        <div class="nav_title">{{ mycardTitle }}</div>
        <div class="nav_btn"></div>
      </div>
      <div class="content_box">
        <div class="current_title">你当前选择的储值方式：</div>
        <div class="current_img_box">
          <img :src="mycardImg" alt="" />
          <div class="current_list_title">{{ mycardTitle }}</div>
        </div>
        <div class="select_stored">
          <div class="select_stored_title">选择储值面额：</div>
          <div class="select_conversion">
            <span>{{ currentValue }}</span
            >{{ company }}=<span>{{ (currentValue * currentCate).toFixed(2) }}</span
            >代币
          </div>
        </div>
        <ul class="current_item">
          <li
            v-for="(item, index) in value"
            :key="index"
            @click="itemClick(index)"
            :style="{
              border: currentIndex == index ? '.026667rem solid #ff5543' : '',
            }"
          >
            <span
              class="current_item_name"
              :style="{ color: currentIndex == index ? '#ff5543' : '' }"
              >{{ item }}</span
            >
            <span
              class="current_item_company"
              :style="{ color: currentIndex == index ? '#ff5543' : '' }"
              >{{ company }}</span
            >
          </li>
        </ul>
        <div
          class="current_input"
          @click="itemClick(8)"
          :style="{ border: currentIndex == 8 ? '.026667rem solid #ff5543' : '' }"
        >
          <input
            type="number"
            placeholder="自定义金额"
            v-model="inputValue"
            @input="print($event.target.value)"
          />
        </div>
        <div class="select_stored" style="margin-top: .266667rem">
          <div class="select_stored_title">付款金额：</div>
          <div class="select_conversion">
            <span>{{ currentValue }} {{ company }}</span>
          </div>
        </div>
        <div class="payment">确认支付</div>
        <!-- <div class="payment" @click="payBtnClick">确认支付</div> -->
      </div>
    </van-popup>
    <razer-gold-item :show="razerShow" title="Razer Gold" @alipay-click="razerClick" :type="this.storedList.currency_code_arr" :storedList="storedList" @dlg-show="dlgShow"/>
  </div>
</template>

<script>
import RazerGoldItem from './RazerGoldItem.vue'
// import {getPost} from '../../../network/post'
import {Toast} from 'vant'

export default {
  components: {
    RazerGoldItem
  },
  props: {
    show: {
      type: Boolean,
      default() {
        return {};
      },
    },
    storedList: {
      type: Object,
      default() {
        return {};
      },
    },
    title: {
      type: String,
      default() {
        return {};
      },
    },
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    company: {
      type: String,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      currentIndex: 4,
      currentValue: 200,
      inputValue: "",
      mycardShow: false,
      mycardTitle: '',
      mycardImg: '',
      cate: 'MYR_CNY',
      razerShow: false,
      childType: null,
    };
  },
  methods: {
    dlgShow() {
      this.razerShow = false
    },
    razerClick(item) {
      this.razerShow = !item
      this.$emit("alipay-click", this.show);
    },
    closeClick() {
      this.$emit("alipay-click", this.show);
    },
    backClick() {
      this.mycardShow = false
      this.$emit("alipay-click", this.show);
    },
    itemClick(i) {
      this.inputValue = "";
      this.currentIndex = i;
      if (i == 8) {
        this.currentValue = 0;
      } else {
        this.currentValue = this.value[i];
      }
    },
    typeClick(index) {
      if (index === 1) {
        this.closeClick()
        this.$emit("alipay-click", this.show);
        this.mycardShow = true
        this.mycardTitle = this.applyType[index].name
        this.mycardImg = this.applyType[index].img
        this.childType = this.applyType[index].childPayType
      } else if (index === 0) {
        this.razerShow = true
        this.$emit("alipay-click", this.show);
        this.childType = this.applyType[index].childPayType
      }
    },
    print(e) {
      if (e !== "") {
        this.currentValue = e;
      } else {
        this.currentValue = 0;
      }
    },
    // payBtnClick() {
    //   this.mycardShow = false
    //   var url = "/user_pay_gold";
    //   var data = {
    //     paytype: 7,
    //     currency_code: this.company,
    //     amount: this.currentValue,
    //     child_paytype: this.childType
    //   };
    //   getPost(url, data).then(res => {
    //     if (res.status == "ok") {
    //       let url = res.data.pay_url
    //       this.$router.push({path: '/targetpage',query: {url: url}})
    //     } else if (res.info == "no_login") {
    //       window.location.href = loginurl;
    //     } else {
    //       Toast(res.info);
    //     }
    //   });
    // }
  },
  computed: {
    applyType() {
      return  [{name:'Razer Gold',img:require('../../../assets/img/stored/recharge_type_21.png'),childPayType: 0},
        {name:'Visa & Master',img:require('../../../assets/img/stored/recharge_type_23.png'),childPayType: 0}]
    },
    currentCate() {
      if (this.storedList.rate_arr) {
        var obj = this.storedList.rate_arr
        var str = ''
        for (var key in obj) {
          if(key === this.cate) {
            str = obj[key]
          }
        }
        return str
      }
    }
  }
};
</script>

<style scoped>
.van-popup {
  border-radius: .533333rem .533333rem 0 0;
}

.van-popup::-webkit-scrollbar {
  display: none;
}

.nav_bar {
  width: 10rem;
  height: 1.173333rem;
  box-sizing: border-box;
  padding: 0 .426667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-bottom: .013333rem solid #cccccc;
}

.nav_icon {
  width: .8rem;
}

.nav_icon img {
  width: .56rem;
  height: .56rem;
}

.nav_title {
  flex: 1;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
}

.nav_btn {
  width: .8rem;
}

.content_box {
  box-sizing: border-box;
  width: 10rem;
  padding: 0 .426667rem;
}

.current_title {
  font-size: .426667rem;
  color: #222222;
  font-weight: bold;
  margin-top: .28rem;
  line-height: .6rem;
}

.current_img_box {
  width: 9.146667rem;
  height: 1.333333rem;
  border: .026667rem solid #ff5543;
  border-radius: .2rem;
  font-size: .4rem;
  color: #222222;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: .28rem;
}

.current_img_box img {
  width: .8rem;
  height: .68rem;
  margin: 0 .266667rem;
}

.select_stored {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
}

.select_stored_title {
  line-height: .6rem;
  font-size: .426667rem;
  font-weight: 700;
  color: #222222;
}

.select_conversion {
  font-size: .426667rem;
  color: #222222;
}

.select_conversion span {
  color: #ff5543;
}

.current_item {
  margin-top: .266667rem;
  width: 100%;
  height: 2.933333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.current_item li {
  box-sizing: border-box;
  padding: .133333rem 0;
  width: 2.106667rem;
  height: 1.333333rem;
  border: .026667rem solid #c1c1c1;
  border-radius: .213333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.current_item_name {
  font-size: .506667rem;
  font-weight: 800;
  color: #777777;
}

.current_item_company {
  font-size: .373333rem;
  font-weight: 800;
  color: #c1c1c1;
}

.current_input {
  position: relative;
  margin-top: .266667rem;
  box-sizing: border-box;
  width: 9.146667rem;
  height: 1.333333rem;
  border: .026667rem solid #c1c1c1;
  border-radius: .213333rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.current_input input {
  width: 8.8rem;
  height: 1.133333rem;
  border-radius: .213333rem;
  outline: none;
  border: 0;
  text-align: center;
  font-size: .426667rem;
  font-weight: bold;
}

.payment {
  margin: .4rem 0;
  width: 9.146667rem;
  height: 1.333333rem;
  background: #ff5543;
  border-radius: .186667rem;
  font-size: .426667rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.266667rem;
  color: #ffffff;
}

.van-popup {
  background: #F5F5F5;
}

.first_header {
  width: 100%;
  height: 1.173333rem;
  background: #ffffff;
  line-height: 1.173333rem;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
  border-bottom: .013333rem solid #cccccc;
}

.first_content {
  box-sizing: border-box;
  padding: 0 .426667rem;
  background: #ffffff;
  margin-bottom: 1.386667rem;
  font-size: .4rem;
  color: #222222;
  display: flex;
  flex-direction: column;
}

.first_content img {
  display: inline-block;
  width: .8rem;
  height: .68rem;
  margin-right: .266667rem;
}

.first_content li {
  width: 100%;
  height: 1.386667rem;
  display: flex;
  align-items: center;
  border-bottom: .013333rem solid #cccccc;
}

.first_content li:last-child {
  border-bottom: 0;
}

.first_close {
  width: 10rem;
  height: 1.44rem;
  background: #ffffff;
  font-size: .426667rem;
  text-align: center;
  line-height: 1.44rem;
  color: #999999;
}
</style>